<template>
  <div class="named-slot-demo">
    <header>
      <slot name="header">默认头部标题</slot>
    </header>

    <main>
      <slot>默认主体内容</slot>
    </main>

    <footer>
      <slot name="footer">默认底部内容</slot>
    </footer>
  </div>
</template>

<script setup>
// 具名插槽组件没有特殊的逻辑
</script>

<style scoped>
.named-slot-demo {
  border: 1px solid #ddd;
  padding: 15px;
  margin: 10px 0;
}
header, main, footer {
  margin: 10px 0;
  padding: 10px;
  background-color: #f4f4f4;
}
</style>
